<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import Demo5 from './components/Demo4.vue'
import { ElCheckbox, ElCheckboxButton } from 'element-plus';
import { ref, markRaw, h } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'


const checkboxOptions = [
  { label: '上海', value: 'Shanghai' },
  { label: '北京', value: 'Beijing' },
  { label: '广州', value: 'Guangzhou', disabled: true },
  { label: '深圳', value: 'Shenzhen' }
]

/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    // checkbox标签有嵌套内容不生效时 会有label不显示的bug
    { prop: 'demo1', label: '基础用法(不推荐)', type: 'checkbox', props: { label: '基础用法', style: { width: 'auto' } } },
    {
      prop: 'demo2', label: '基础用法', type: 'custom', is: markRaw(ElCheckbox),
      props: { label: '基础用法', style: { width: 'auto' } }
    },
    {
      prop: 'demo3', label: '基础用法(按钮样式)', type: 'checkboxButton',
      props: { label: '基础用法(按钮样式)', style: { width: 'auto' } }
    },
    { // 多选框组
      prop: 'demo4', label: '多选框组', type: 'checkboxGroup',
      events: {
        change: (val: string[]) => { // 通过选框label获取真实的值
          let realValue: any[] = []
          val.forEach((item: string) => {
            const target = checkboxOptions.find(o => o.label === item)
            target ? realValue.push(target.value) : ''
          })
          dataForm.value.realDemo4 = realValue
        }
      },
      slots: { default: h('div', {}, checkboxOptions.map(item => h(ElCheckbox, item, ''))) }
    },
    { // 中间状态
      prop: 'demo5', label: '中间状态', type: 'custom', is: markRaw(Demo5),
      events: {
        change: (val: string[]) => { // 通过选框label获取真实的值
          let realValue: any[] = []
          val.forEach((item: string) => {
            const target = checkboxOptions.find(o => o.label === item)
            target ? realValue.push(target.value) : ''
          })
          dataForm.value.realDemo5 = realValue
        }
      }, props: { options: checkboxOptions }
    },
    { // 按钮样式
      prop: 'demo6', label: '按钮样式', type: 'checkboxGroup',
      events: {
        change: (val: string[]) => { // 通过选框label获取真实的值
          let realValue: any[] = []
          val.forEach((item: string) => {
            const target = checkboxOptions.find(o => o.label === item)
            target ? realValue.push(target.value) : ''
          })
          dataForm.value.realDemo6 = realValue
        }
      },
      slots: {
        default: h('div', {}, checkboxOptions.map(item =>
          h(ElCheckboxButton, { ...item, style: { width: 100 / checkboxOptions.length + '%' } }, '')
        ))
      }
    },
    { // 带有边框
      prop: 'demo7', label: '带有边框', type: 'checkboxGroup',
      events: {
        change: (val: string[]) => { // 通过选框label获取真实的值
          let realValue: any[] = []
          val.forEach((item: string) => {
            const target = checkboxOptions.find(o => o.label === item)
            target ? realValue.push(target.value) : ''
          })
          dataForm.value.realDemo7 = realValue
        }
      },
      slots: { default: h('div', {}, checkboxOptions.map(item => h(ElCheckbox, { ...item, border: true }, ''))) }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>
<style lang="scss" scoped>
:deep(.el-checkbox-button__inner) {
  width: 100%;
}
</style>